<template>
	<view class="center">
		<u-sticky>
			<view class="header box box-pack-between box-align-center" style="padding: 0 20rpx;">
				<view class="txt">APP每日使用统计</view>
				<picker mode="date" class="logTime" @change="logChange" :end="endTime">
					<view class="box">
						<text style="font-size: 28rpx;font-weight: 600;">{{time}}</text>
					</view>
				</picker>
			</view>
		</u-sticky>
		<view class="content" v-if="timeDate.length">
			<view class="appTime box box-pack-between box-align-center" v-for="(item,index) in timeDate" :key="index">
				<view class="box box-align-center">
					<view class="appImg">
						<image :src="item.app_img" mode=""></image>
					</view>
					<view class="appName">{{item.app_name}}</view>
				</view>
				<view class="serviceTime">{{item.use_time | Minute}}</view>
			</view>
		</view>
		<view class="empty" v-else>
			<u-empty text="今日暂无记录" src="" icon-size="220" font-size="36"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getAppUseTimeLog
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				time: '',
				timeDate: [],
				endTime: '',
			}
		},
		onLoad() {
		},
		onShow() {
			let date = new Date();
			let month = Number(date.getMonth()) + 1;
			this.time = date.getFullYear() + "/" + month + "/" + date.getDate();
			this.endTime = date.getFullYear() + "/" + month + "/" + date.getDate();
			var timestamp = Date.parse(date) / 1000;
			console.log('时间', timestamp, this.time)
			this.getAppUseTimeLogs()
		},
		methods: {
			//piceer时间事件
			logChange(value) {
				let times = value.detail.value.replace(/-/g, '/')
				this.time = times
				var date = new Date(times).getTime() / 1000
				this.getAppUseTimeLogs(date)
				console.log('选中的时间', date, times)
			},
			getAppUseTimeLogs(time = '') {
				getAppUseTimeLog({id: uni.getStorageSync('snId'), time: time}).then(res => {
					console.log('-----------日志',res)
					this.timeDate = res.data
				}).catch(err => {
					this.timeDate = []
					console.log('获取失败',err)
				})
			},
		}
	}
</script>

<style scoped lang="less">
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 100%;
		height: 380upx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.charts {
		width: 700upx;
		height: 350upx;
		background-color: #FFFFFF;
	}

	.header {
		background-color: #FFFFFF;

		.txt {
			font-size: 30rpx;
			font-weight: 600;
		}
	}

	.content {

		padding: 20rpx;

		.appTime {
			margin-top: 40rpx;
			color: #333333;

			.appImg {
				overflow: hidden;
				height: 80rpx;
				width: 80rpx;
				border-radius: 32rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.appName {
				margin-left: 40rpx;
				font-size: 30rpx;
			}

			.serviceTime {
				font-size: 24rpx;
			}
		}
	}
</style>
